<template>
  <div class="index">
    <collapse :border="false" v-model="activeNames" :right-icon="'plus'">
      <collapse-item :disabled="n.id == 2" v-for="n in collapseItems" :key="n.id" :title="n.itemName" :name="n.id" :border="false" :is-link="false" :rightIcon="'plus'" >
        <template #value>
          <div v-if="n.id !== 2"><span :style="{transform: activeNames.includes(n.id) ? 'rotate(180deg)' : ''}" :class="['iconfont', activeNames.includes(n.id) ? 'icon-hao' : 'iconaddTodo-nav']"></span></div>
        </template>
        <template v-if="n.id == 1">
          <div class="H5GoodsContent" v-html="goodsContent"></div>
        </template>
        <template v-if="n.id == 2">
          <div class="goodsList">
            <div class="goods" v-for="goods in relateGoodsInfo" :key="goods.goods_id" @click="goToDetail(goods)">
              <div class="imgWrap"><img :src="goods.original_img" alt=""></div>
              <div class="goodsInfo">
                <p class="goodsName">{{goods.goods_name}}</p>
                <p class="goodsPrice">￥<span>{{goods.is_active_price ? goods.active_price : goods.shop_price}}</span></p>
                <p class="goodsMarketPrice">市场价{{goods.market_price}}</p>
              </div>
            </div>
          </div>
        </template>
        <template v-if="n.id == 3">
          <div class="goodsServiceList">
            <div class="service" v-for="service in goodsService" :key="service.id">
              <div class='service-img'>
                <img v-if="service.id == 8" src='../../assets/images/goods/serveExplain1.png'>
                <img v-if="service.id == 9" src='../../assets/images/goods/serveExplain2.png'>
                <img v-if="service.id == 10" src='../../assets/images/goods/serveExplain3.png'>
                <img v-if="service.id == 7" src='../../assets/images/goods/serveExplain4.png'>
              </div>
              <div class='service-name'>
                <div class='service-name-t'>{{service.name}}</div>
                <div class='service-name-d'>{{service.content}}</div>
              </div>
            </div>
          </div>
        </template>
        <template v-if="n.id == 4">
          <div class="goodsBox">
            <img src="https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des1.jpg?x-oss-process=image/resize,m_mfit,h_670,w_670" alt="">
          </div>
        </template>
        <template v-if="n.id == 5">
          <div class="goodsBrand">
            <img src='https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des2.jpg?x-oss-process=image/resize,m_mfit,h_670,w_670' style='width:670rpx;height:592rpx'>
            <img src='https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des3.jpg?x-oss-process=image/resize,m_mfit,h_670,w_670' style='width:670rpx;height:858rpx'>
            <img src='https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des4.jpg?x-oss-process=image/resize,m_mfit,h_670,w_670' style='width:670rpx;height:728rpx'>
            <img src='https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des5.jpg?x-oss-process=image/resize,m_mfit,h_670,w_670' style='width:670rpx;height:1100rpx'>
          </div>
        </template>
        <template v-if="n.id == 6">
          <div class="goodsBrand">
            <img src='https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des6.jpg?x-oss-process=image/resize,m_mfit,h_670,w_670' style='width:670rpx;height:592rpx'>
          </div>
        </template>
        <template v-if="n.id == 7">
          <div class="goodsBrand">
            <img src='https://bojemoss.oss-cn-shanghai.aliyuncs.com/other/des7.jpg'>
          </div>
        </template>
      </collapse-item>
    </collapse>
  </div>
</template>

<script>
import { Collapse, CollapseItem } from 'vant';
import {getGoodsInfo} from '@/api/request';
import { mapState } from "vuex";
import wx from 'weixin-js-sdk';
import {getQueryVariable} from '@/tools/utils'
export default {
  data() {
    return {
      tempCollapseItems: [
        {itemName: '商品信息', id: 1, isShow: true},
        {itemName: '商品推荐', id: 2, isShow: true},
        {itemName: '服务说明', id: 3, isShow: true},
        {itemName: '产品包装', id: 4, isShow: true},
        {itemName: '品牌介绍', id: 5, isShow: true},
        {itemName: '保养方法', id: 6, isShow: true},
        {itemName: '会员服务', id: 7, isShow: true},
      ],
      collapseItems: [],
      relateGoodsInfo: [],
      goodsContent: '',
      goodsService: [],
      activeNames: [2],
      id: 1,
      unique_id: getQueryVariable('unique_id'),
      token: getQueryVariable('token'),
      platform: getQueryVariable('platform'),
      sid: getQueryVariable('sid'),
      from: getQueryVariable('from'),
      id: getQueryVariable('id'),
      is_json: getQueryVariable('is_json'),
      access_type: getQueryVariable('access_type'),
      erp_sku_id: getQueryVariable('erp_sku_id'),
      is_from_cart: getQueryVariable('is_from_cart')
    };
  },
  computed: mapState({
    env: state => {
      return state.deviceEnvironment
    }
  }),
  components: {Collapse, CollapseItem},
  mounted () {
    this.getGoodsInfo()
  },
  methods: {
    goToDetail (goods) {
      if (this.env == 'ios' || this.env == 'android') {
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goGoodsDetail', {
          goods_id: goods.goods_id,
          activity_id: ''
        })
      } else if (this.env == 'miniprogram') {
        wx.miniProgram.navigateTo({url: 'pages/goods/goodsInfo/goodsInfo?goods_id=' + goods.goods_id})
      }
    },
    getGoodsInfo () {
      getGoodsInfo({
        noLoading: true,
        is_json: this.is_json || 1,
        access_type: this.access_type || 0,
        erp_sku_id: this.erp_sku_id || 0,
        is_from_cart: this.is_from_cart || 0,
        unique_id: this.unique_id,
        token: this.token,
        platform: this.platform,
        sid: this.sid,
        from: this.from,
        id: this.id
      }).then(res => {
        this.relateGoodsInfo = res.relateGoodsInfo || []
        this.goodsContent = res.goods.goods_content || ''
        this.goodsService = res.goods.service || []
        if (!res.goods.goods_content) {
          this.tempCollapseItems[0].isShow = false
        }
        if (!(res.relateGoodsInfo.length && res.goods.prom_type != 8)) {  // 直播商品详情不展示商品推荐
          this.tempCollapseItems[1].isShow = false
        }
        if (!(res.goods.service && res.goods.service.length)) {
          this.tempCollapseItems[2].isShow = false
        }
        this.collapseItems = this.tempCollapseItems.filter(val => {
          return val.isShow == true
        })
      }).catch(e => {
        console.log(e)
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .index{
    width: 100%;

    .iconfont{
      display: inline-block;
      transition: 0.5s;
      font-weight: 500;
      font-size: 20px;
    }
    /deep/ .van-cell__title{
      font-size: 0.3rem;
      color: #000;
      font-weight: bold;
    }
    /deep/ .van-cell__value{
      color: #000;
    }
    /deep/ .H5GoodsContent{
      img{
        width:100%;
      }
    }
    /deep/ .van-collapse-item__content{
      padding-top: 0;
    }
    .goodsList{
      display: grid;
      grid-template-columns: repeat(3, 2.2rem);
      justify-content: space-between;
      grid-row-gap: 0.44rem;

      .goods{
        width: 2.2rem;

        .imgWrap{
          width: 2.2rem;
          height: 2.2rem;
          margin-bottom: 0.17rem;

          img{
            display: block;
            object-fit: contain;
            width: 100%;
            height: 100%;
            border-radius: 0.1rem;
          }
        }
        .goodsInfo{
          .goodsName{
            font-size: 0.24rem;
            color: #383838;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 0.33rem;
            margin-bottom: 0.12rem;
          }
          .goodsPrice{
            font-size: 0.22rem;
            color: #000000;
            font-weight: bold;
            line-height: 0.42rem;

            span{
              font-size: 0.3rem;
            }
          }
          .goodsMarketPrice{
            font-size: 0.25rem;
            color: #999999;
            transform: scale(0.8);
            transform-origin: left center;
            text-decoration: line-through;
            line-height: 0.28rem;
          }
        }
      }
    }
    .goodsServiceList{

      .service{
        display: flex;
        padding: 0.2rem 0;

        .service-img{
          width: 0.72rem;
          height: 0.72rem;

          img{
            object-fit: contain;
            width: 100%;
          }
        }

      .service-name {
        margin-left: 0.50rem;
      }

      .service-one {
        display: flex;
        padding: 0.20rem 0;
      }

      .service-name-t {
        font-size: 0.28rem;
        color: #222;
      }

      .service-name-d {
        font-size: 0.24rem;
        color: #959595;
      }
      }
    }
    .goodsBox, .goodsBrand{
      img{
        width: 100%;
      }
    }
  }
</style>